<template>
  <div class="loginDiv">
    <div class="loginBox">
      <div class="inputDiv">
        <van-form @submit="onSubmit">
          <van-field
            v-model="account"
            name="account"
            left-icon="phone-o"
            placeholder="请输入手机号码"
          />
          <van-field
            v-model="pwd"
            type="password"
            name="password"
            left-icon="shield-o"
            placeholder="请输入登录密码"
            v-if="text"
          />

          <van-field
            v-model="code"
            placeholder="请输入短信验证码"
            left-icon="shield-o"
            v-if="!text"
          >
            <template #button>
              <span style="color: red" @click="codeEvent">发送验证码</span>
            </template>
          </van-field>

          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="bottomText" @click="speedinessEvent">
        {{ text ? "快速登录" : "账号登录" }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { login } from "../../api/index";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useStore } from "../../stores/stors";
const store = useStore();

const { loginToken } = storeToRefs(store);
// console.log(loginToken);
const text = ref("1");
const account = ref("");
const pwd = ref("");
const code = ref("");
const router = useRouter();

store.$subscribe((mutation, state) => {
  // console.log(state, "subscribe");
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem("token", JSON.stringify(state.loginToken));
});

const speedinessEvent = () => {
  if (text.value) {
    text.value = 0;
  } else {
    text.value = 1;
  }
};
const onSubmit = (values) => {
  // console.log(values);
  // 账号登录
  if (text.value) {
    // console.log(1);
    if (account.value == "") {
      showToast("请填写账号");
    } else {
      if (!/^1[3-9]\d{9}$/.test(account.value)) {
        Toast("请输入正确的账号");
      } else {
        login(values).then((res) => {
          // console.log(res);
          showToast(res.msg);
          if (res.status == 200) {
            router.push("/");
            store.getUserFn(res.data);
          }
        });
      }
    }
  } else {
    // 手机号登录
  }
};
</script>

<style lang="less" scoped>
.loginDiv {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .loginBox {
    width: 100%;
    // height: 15.04rem;
    padding: 0.4rem;
    .bottomText {
      text-align: center;
      color: #999;
      font-size: 0.4375rem;
    }
    .inputDiv {
      width: 100%;

      //input
      .van-cell {
        line-height: 1.3333rem;
      }
      //button
      .van-button--info {
        background-color: #e93323;
        border: none;
        color: white;
        margin-top: 1.3333rem;
      }
    }
  }
}
</style>
